<template>
  <div class="app-container" ref="appContainer">
    <div class="conversion-table">
      <PropTable
        :columns="column"
        :data="list"
        :total="total"
        :show="false"
        @reset="reset"
        @onSubmit="onSubmit"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template v-slot:logState="scope">
          <div v-if="!useEmpty(scope.row.logState)">
            {{ scope.row.logState === "0" ? "未提交" : "已提交" }}
          </div>
        </template>

        <!-- 计划状态 -->
        <template v-slot:approvalStatus="scope">
          <div v-if="!useEmpty(scope.row.approvalStatus)">
            {{ getStatusLabel(scope.row.approvalStatus) }}
          </div>
        </template>

        <template v-slot:operation="scope">
          <div style="display: flex; justify-content: flex-end">
            <el-button link type="primary" icon="Edit"
              v-if="(scope.row.approvalStatus != '2' && scope.row.approvalStatus != '1')
              && userStore.rolescode!=15"
              @click="handleEdit(scope.row)" >
              写日志
            </el-button>
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleDetails(scope.row)"
              v-if="(scope.row.approvalStatus !== '0' && scope.row.logState === '1') || userStore.rolescode==15">
              详情
            </el-button>
            <el-button
              link
              type="danger"
              icon="Delete"
              @click="handeleRevoke(scope.row)"
              v-if="(scope.row.approvalStatus === '2' && scope.row.approvalStatus != '1')
              && userStore.rolescode!=15" >
              撤回
            </el-button>
          </div>
        </template>
      </PropTable>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
//@ts-ignore
import PropTable from "@/components/Table/PropTable/index.vue";
//@ts-ignore
import { exportExcel } from "@/utils/exprotExcel";
import { useEmpty } from "@/utils/index";
import { ElMessageBox, ElMessage } from "element-plus";

import { useRouter, useRoute } from "vue-router";

import { noticeListApi,withdrawApi } from "@/api/notice/index";
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance();

const loading = ref(true);
const detailsvisible = ref(false);

const route = useRoute();
const router = useRouter();

const businessoptions = ref([]);
const userStore = useUserStore();

let optionsList = [
  {
    value: "2",
    label: "计划审批中",
  },
  {
    value: "1",
    label: "计划审批通过",
  },
  {
    value: "0",
    label: "计划审批驳回",
  },
  {
    value: "3",
    label: "计划审批撤回",
  },
];

const title = ref("");
const column = [
  {
    name: "projectName",
    label: "项目名称",
    inSearch: true,
    valueType: "input",
  },
  {
    name: "createBy",
    label: "创建人",
    valueType: "input",
  },
  {
    name: "approvalStatus",
    label: "审批状态",
    inSearch: true,
    valueType: "select",
    options: optionsList,
    slot: true,
    minWidth: "140px",
  },
  {
    name: "logState",
    label: "状态",
    slot: true,
  },
  {
    name: "createTime",
    label: "创建时间"
  },
  { name: "operation", slot: true, fixed: "right", width: 200, label: "操作" },
];

const list = ref([]);

const getStatusLabel = (value) => {
  let matchedOption = optionsList.find((option) => option.value === value);
  return matchedOption ? matchedOption.label : "";
};

let pageNum = ref(1);
let pageSize = ref(10);
let total = ref(0);
let paramsSubmit;

const seal = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };

  if (paramsSubmit) {
    for (let key in paramsSubmit) {
      if (paramsSubmit[key]) {
        params[key] = paramsSubmit[key];
      }
    }
  }

  const res = await noticeListApi(params);
  if (res.code === 200) {
    for(let i=0,len=res.rows.length;i<len ;i++ ){
      res.rows[i].createTime = res.rows[i].createTime.substring(0,10);
    }
    list.value = res.rows;
    total.value = Number(res.total);
  } else {
    ElMessage.error(res.msg);
    // 进行提示
    loading.value = false;
  }
};

const reset = (val) => {
  val = "";
  seal();
};
const onSubmit = (val) => {
  if (val) {
    // val.projectCreateTime = formatDate(val.projectCreateTime);
    paramsSubmit = val;
    seal();
  }
};

const handleSizeChange = (valueSise) => {
  pageSize.value = valueSise;
  seal();
};
const handleCurrentChange = (valuePage) => {
  pageNum.value = valuePage;
  seal();
};

const handleEdit = (row) => {
  router.push({
    path: "/notice/add/noticeAdd",
    query: {
      name: "1",
      id: row.logId,
      logState: row.logState,
      projectName:row.projectName
    },
  });
};

const handleDetails = (row) => {
  router.push({
    path: "/notice/add/noticeAdd",
    query: {
      name: "5",
      id: row.logId,
      logState: row.logState,
      projectName:row.projectName
    },
  });
};


const handeleRevoke = (row) => {
  ElMessageBox.confirm("确定要撤回吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (row) {
        const result = await withdrawApi(row);
        if (result.code === 200) {
          // 删除成功的提示
          ElMessage.success(result.msg);
          seal();
        }
      }
    })
    .catch((err) => {
      // 用户点击取消执行的操作
      ElMessage.error("取消");
      // console.log('取消');
    });
};

onMounted(async () => {
  await seal();
});
</script>
